<!-- TitleComponent.vue -->
<template>
    <div class="title-container">
        <h1>{{ mainTitle }}</h1>
        <h2>{{ subTitle }}</h2>
    </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps({
    mainTitle: {
        type: String,
        required: true,
    },
    subTitle: {
        type: String,
        default: '列表',
    },
});
</script>

<style scoped>
.title-container {
    display: flex;
    align-items: baseline;


    h1 {
        font-size: 30px;
        margin-right: 15px;
        margin-left: 20px;
    }

    h2 {
        font-size: 16px;
        color: #888;
        margin: 0;
    }
}
</style>